<script setup>
import { toRefs, onMounted, ref } from "vue";
import { getDate } from "./utils/index.js";

const data = reactive({
  time: {},
});
const { time } = toRefs(data);

onMounted(() => {
  time.value = getDate();
  setInterval(function () {
    time.value = getDate();
  }, 1000);
});
</script>

<template>
  <div class="app">
    <div class="in">
      <div class="title">
        <div class="left">
          <img src="./assets/img/logo.png" />
          <p>烟花点火及示踪系统</p>
        </div>
        <div class="center">
          <router-link to="/project"><p>试验项目</p></router-link>
          <router-link to="/history"><p>试验记录</p></router-link>
        </div>
        <div class="right">
          <img src="./assets/img/head.png" />
          <p>admin</p>
        </div>
      </div>
      <div class="content">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>
    </div>
  </div>
</template>

<style scoped>
.app {
  width: 100%;
  height: 100%;
  background-color: #f5f7fb;
}
.app .in {
  margin: 0 auto;
  /* max-width: 1920px; */
  height: 100%;
}
.title {
  height: 6.67vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #4f52bb;
  border-radius: 0 0 1.4vw 1.4vw;
  padding: 0 1.8vw;
  color: #fff;
}
.title .left,
.title .right {
  display: flex;
  align-items: center;
}
.title .left img {
  width: 4.2vh;
  height: 4.2vh;
}
.title .right img {
  width: 3.4vh;
  height: 3.4vh;
}
.title .left p {
  margin-left: 0.8vw;
  font-size: 1.4vw;
}
.title .right p {
  margin-left: 1.2vw;
  font-size: 1.2vw;
}
.title .center {
  display: flex;
}
.title .center a:nth-child(2) {
  margin-left: 4.1vw;
}
.title .center p {
  padding: 0.9vh 1vw;
  color: #fff;
  border-radius: 0.4vw;
  font-size: 0.8vw;
}
.title .center .active p {
  color: #4f52bb;
  background-color: #fff;
}
.content {
  height: calc(100% - 7.4vh);
  padding: 1.8vh;
}
</style>
<style lang="scss">
.el-pagination .el-pager li.is-active {
  color: #4f52bb !important;
}
.el-button.el-button--primary {
  background-color: #4f52bb;
  border-color: #4f52bb;
}
.el-button.el-button--primary.is-link {
  color: #4f52bb;
  background-color: transparent;
  border-color: transparent;
}

.el-button.el-button--success {
  background-color: #4f52bb;
  border-color: #4f52bb;
}
.el-button.el-button--success.is-link {
  color: #4f52bb;
  background-color: transparent;
  border-color: transparent;
}
.el-button {
  color: #fff;
  border-color: #4f52bb;
}
.el-button .el-icon {
  color: #fff;
}
.el-button:hover {
  color: #4f52bb;
  border-color: #4f52bb;
  background-color: transparent;
}
.el-button:hover .el-icon {
  color: #4f52bb;
  fill: #4f52bb;
}
.el-button.el-button--success {
  background-color: #76c9d6;
  border-color: #76c9d6;
}
.el-button.el-button--success.is-link {
  color: #76c9d6;
  background-color: transparent;
  border-color: transparent;
}
.el-button.el-button--success:hover {
  color: #76c9d6;
  background-color: transparent;
  border-color: #76c9d6;
}
.el-button.el-button--success:hover .el-icon {
  color: #76c9d6;
  fill: #76c9d6;
}
.el-button.el-button--danger {
  background-color: #eb7e91;
  border-color: #eb7e91;
}
.el-button.el-button--danger.is-link {
  color: #eb7e91;
  background-color: transparent;
  border-color: transparent;
}
.el-button.el-button--danger:hover {
  color: #eb7e91;
  background-color: transparent;
  border-color: #eb7e91;
}
.el-button.el-button--danger:hover .el-icon {
  color: #eb7e91;
  fill: #eb7e91;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #4f52bb;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #4f52bb;
  border-color: #4f52bb;
}
.el-checkbox__inner:hover {
  border-color: #4f52bb;
}
</style>
